<!DOCTYPE html>
<html>
	
<head>
	<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
	
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
	
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
	
	<script>
		$(document).ready(function()
		{
			$("#tux").css({ opacity:0, width:"0%", height:"0%" });
			$("#listgroup").hide();
			$("#listgroup2").hide();
				
			new QWebChannel(qt.webChannelTransport, function(channel)
			{
				mainWindow = channel.objects.mainWindow;
			});
		});
		
		function changeHtmlText(newText)
		{
			$("#infotext").html(newText);
		}
			
		function startAnim()
		{
			// Reset
			$("#tux").css({ opacity:0, width:"0%", height:"0%" });
			$("#listgroup").hide();
			$("#listgroup2").hide();
			
			$("#tux").animate({ opacity:1.0, width:"100%", height:"100%" }, 1000, function()
			{
				// tux animation complete
				$("#listgroup").slideDown(1000, function()
				{
					// listgroup animation complete
					$("#listgroup2").fadeIn(1500);
				});
			});
		}
	</script>
</head>

<body>
	<div class="container-fluid">
		<form id="example-form" action="#" class="container-fluid">
			<div class="form-group">
				<div class="col-md-12"><h3>Call Javascript Function from C++</h3></div>
				
				<div class="col-md-12"><div class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <span id="infotext">Change this text using C++.</span></div></div>
				
				<div class="col-md-2">
					<img id="tux" src="tux.png"></img>
				</div>
				
				<div class="col-md-5">
					<ul id="listgroup" class="list-group">
						<li class="list-group-item">Cras justo odio</li>
						<li class="list-group-item">Dapibus ac facilisis in</li>
						<li class="list-group-item">Morbi leo risus</li>
						<li class="list-group-item">Porta ac consectetur ac</li>
						<li class="list-group-item">Vestibulum at eros</li>
					</ul>
				</div>
				
				<div id="listgroup2" class="col-md-5">
					<a href="#" class="list-group-item active">
						<h4 class="list-group-item-heading">Item heading</h4>
						<p class="list-group-item-text">Cras justo odio</p>
					</a>
					<a href="#" class="list-group-item">
						<h4 class="list-group-item-heading">Item heading</h4>
						<p class="list-group-item-text">Dapibus ac facilisis in</p>
					</a>
					<a href="#" class="list-group-item">
						<h4 class="list-group-item-heading">Item heading</h4>
						<p class="list-group-item-text">Morbi leo risus</p>
					</a>
				</div>
				
			</div>
		</form>
	</div>
</body>

</html>
